<template>
    <!--
        部门选择器
        body-class="modalStyle" 表示样式
        size="lg" 表示模态窗口大小 xl,lg,sm,full
        hide-footer 表示隐藏底部按钮
        hide-header 表示隐藏头部内容
        no-close-on-backdrop 表示鼠标点击背景不可关闭
        hide-header-close 表示隐藏头部关闭按钮
        centered 居中
        ok-title=“确定” 
        cancel-title=取消
        @ok="handleOk" 
        @cancel="handleCancel"
        scrollable 滚动条
        hide-backdrop 隐藏背景
        wrapClassName="ant-modal-cust-warp" 
        style="top:5%;height: 85%;overflow-y: hidden" 样式
    -->
    <b-modal ref="my-modal" title="附件上传" scrollable no-close-on-backdrop centered>
        <div class="d-block text-center">
            <!-- 参数含义：
                multiple：多个
                on-preview：预览
                on-remove：移除事件
                on-success：上传成功回调事件
                action：提交地址
                limit：最大数量
                auto-upload：选择文件立即提交 true是 false否
                list-type：类型	text/picture/picture-card
             -->
            <el-upload
                class="upload-demo"
                ref="upload"
                :limit="1"
                drag
                list-type=""
                :on-change="beforeUpload"
                :headers="headers"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :on-success="handleSuccess"
                :on-error="handleError"
                :action="action"
                :auto-upload="false"    
                multiple            
                >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传json,txt类型文件，且不超过2M</div>
            </el-upload>
        </div>
        <template slot="modal-footer">
            <!--自定义按钮-->
            <button type="button" class="btn btn-light-danger font-weight-bold mr-2" block @click="hideModal">
                <i class="icon-xl fa fa-times"></i>取消
            </button> 
            <button type="button" class="btn btn-light-success font-weight-bold mr-2" @click="upload">
                <i class="icon-xl flaticon-folder-3"></i> 开始上传
            </button>
        </template>
    </b-modal>
</template>

<script>
    import apiUtil from "@/core/util/apiUtil.js"; 
    import tokenUtil from "@/core/util/tokenUtil.js";
    import { handleNotify,handleAlert,handleConfirm,showWating,closeWating,downloadFileCallFn} from "@/core/util/jehcUtil.js";
    export default {
        data() {
            return {
                action:process.env.VUE_APP_OAUTH_API+'/oauthFunctionInfo/import',
                headers:{
                    "token": `${tokenUtil.getToken()}`,
                    "JEHC-SESSION-ID": `${tokenUtil.getJSessionId()}`
                }
            }
        },
        mounted() {
        },
        methods: {  
            handleSuccess(res) {  
                if(res.success){
                    handleAlert("导入成功", "success", 3);
                }else {
                    handleAlert("导入失败", "error", 3);
                }            
                this.$emit("change",res);//组件传值，即向父级模态框中传递值，采用change方式
                this.$refs['my-modal'].hide();
            },
            handleError(){
                handleAlert("导入失败", "error", 3);
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            beforeRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },           
            showModal() {
                this.$refs['my-modal'].show();
            },
            hideModal() {
                this.$refs['my-modal'].hide()
            },
            toggleModal() {
                this.$refs['my-modal'].toggle('#toggle-btn')
            },
            beforeUpload(data){

            },
            upload(data){
                this.$refs.upload.submit();
            }
        }
    }
</script>